<%--
  Created by IntelliJ IDEA.
  User: 92460
  Date: 2020/12/19
  Time: 10:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>显示json对象信息</title>
</head>
<body>
<p>显示json对象信息</p>
<div id="login-user"></div>
<p>商品类别： <select name="productCat" id="product-cat"></select></p>
<div><table id="product-list">
    <tr>
        <th>商品名称</th>
        <th>商品价格</th>
        <th>库存</th>
    </tr>
</table>
    <tr><td></td><td></td><td></td></tr>
</div>

<script src="${pageContext.request.contextPath}/js/jquery-3.5.1.js"></script>
<script>
    let loginUser = {
        "userId": 1,
        "username": "tom",
        "age": 20,
        "gender": "男"
    };
    let catList = [{"catId": 1, "catName": "化妆品"}
        , {"catId": 2, "catName": "家居百货"}
        , {"catId": 3, "catName": "手机数码"}];
    let productList = [
        {
            "id": 1,
            "name": "洗发水",
            "price": 10.5,
            "stock": 10
        },
        {
            "id": 2,
            "name": "香皂",
            "price": 5,
            "stock": 20
        },
        {
            "id": 3,
            "name": "护发素",
            "price": 30,
            "stock": 50
        }
    ];
    let $productList = $("#product-list");
    $(productList).each(function () {
        $productList.append("<tr><td>" +this.name+
            "</td><td>" +this.price+
            "</td><td>" +this.stock+
            "</td></tr>");
    });

    $("#login-user").append("<p>用户id：" + loginUser.userId + "</p>")
        .append("<p>用户名：" + loginUser.username + "</p>")
        .append("<p>年龄：" + loginUser.age + "</p>")
        .append("<p>性别：" + loginUser.gender + "</p>");
    let $productCat = $("#product-cat");
    $(catList).each(function (i) {
        let select = false;
        if (i == 2) {
            select = true;
        }
        $productCat.append('<option value="' + this.catId +
            '" selected=' + select +
            '>' + this.catName +
            '</option>');
    });
</script>
</body>
</html>
